/*
 * @Description: 全宗信息面板
 * @Author: Rfan
 * @Date: 2022-02-10 09:30:53
 * @LastEditTime: 2022-02-17 12:03:07
 */

import type { FC } from 'react';
import classNames from 'classnames/bind';
import { Button, Space, Table } from 'antd';
import { useArchivingContext } from '../contexts/ArchivingContext';

import styles from '../styles/approvalPane.module.scss';

const cx = classNames.bind(styles);

const { Column } = Table;

export type ApprovalPaneProps = {
  title?: string;
  data?: any;
};

const ApprovalPane: FC<ApprovalPaneProps> = ({ title, data }) => {
  console.log('approval pane:', data);
  const { list, loading, selectItems } = useArchivingContext();

  // 表格选项相关设置
  const onSelectChange = (selectedRowKeys: number[]): void => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
  };

  const rowSelection = {
    selectItems,
    onChange: onSelectChange
  };

  return (
    <div className={cx('approval-pane')}>
      <div className={cx('approval-header')}>
        <div className={cx('title')}>{title}</div>
        <div className={cx('opearte')}>
          <Space>
            <Button disabled>审批</Button>
          </Space>
        </div>
      </div>
      <div className={cx('container')}>
        <Table dataSource={list} loading={loading} rowKey="id" rowSelection={rowSelection}>
          <Column title="序号" dataIndex="id" key="id" align="center" />
          <Column title="移交清单标题" dataIndex="code" key="code" align="center" />
          <Column title="状态" dataIndex="name" key="name" align="center" />
          <Column title="档案类型" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="移交人" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="移交日期" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="总数" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="接受" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="移交单位" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="办理人" dataIndex="operateTime" key="operateTime" align="center" />
          <Column title="办理日期" dataIndex="operateTime" key="operateTime" align="center" />
        </Table>
      </div>
    </div>
  );
};

export default ApprovalPane;
